<template>
    <div class="back-root">
        <a @click="back">
        <!-- <img src="/img/back.png" alt=""> -->
        </a>
        <span class="title">
            <slot></slot>
        </span>
        <span class="right">
            <span v-show="searchShow" class="search">
                <!-- <img src="/img/search.png" alt=""> -->
            </span>
        </span>
    </div>
</template>

<script>

export default{
    props:{
        searchShow:{
            type:Boolean,
            default:true
        }
    },
    methods:{
        back(){
            this.$router.back();
        }
    }
}
</script>

<style scoped>
    .back-root{
        margin-top: 5.3vw;
        width: 92.3vw;
        height: 11.7vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;

    }
    a,.search,.right{
        width: 6.7vw;
        height: 6.7vw;
        cursor: pointer;
        display: inline-block;   
    }
    a{
        background-image: url("/img/back.png");
        background-size: 60% 80%;
        background-repeat: no-repeat;
        background-position-y: 20%;
    }
    .search{
        background-image: url("/img/search.png");
        background-size: 80% 80%;
        background-repeat: no-repeat;
    }
    img{
        height: 4vw;
    }
    span:nth-of-type(1){
        font-size: 4.8vw;
        color: #333333;
        font-weight: bold;
    }
</style>